<template>
	<view class="home">
		<view class="container">
			<!-- 顶部标题 -->
			<view class="header">
				<image class="bg-img" src="@/static/zeliuc.png" v-show="isLogin"></image>
				<view class="title">{{ isLogin ? '欢 迎 登 录' : '用 户 注 册' }}</view>
			</view>

			<!-- 登录/注册表单 -->
			<view class="form-container">
				<!-- 用户名输入 -->
				<view class="input-group" v-if="isLogin">
					<text class="label">用户名或手机号</text>
					<input class="input" v-model="form.username" placeholder="请输入用户名或手机号"
						placeholder-class="placeholder" />
				</view>
				<view class="input-group" v-if="!isLogin">
					<text class="label">昵称</text>
					<input class="input" v-model="form.nikeName" placeholder="请输入昵称" placeholder-class="placeholder" />
				</view>
				<view class="input-group" v-if="!isLogin">
					<text class="label">手机号</text>
					<input class="input" v-model="form.phoneNumber" placeholder="请输入手机号" placeholder-class="placeholder"
						inputmode="tel" />
				</view>

				<!-- 密码输入 -->
				<view class="input-group">
					<text class="label">密码</text>
					<view class="password-input-wrapper">
						<input class="input" v-model="form.password" :password="!showPassword" placeholder="请输入密码"
							placeholder-class="placeholder" />
						<view class="password-toggle" @click="togglePassword">
							<uni-icons :type="typeicon" size="30" :color="coloricon"></uni-icons>
						</view>
					</view>
				</view>

				<!-- 注册时的确认密码 -->
				<view class="input-group" v-if="!isLogin">
					<text class="label">确认密码</text>
					<view class="password-input-wrapper">
						<input class="input" v-model="form.confirmPassword" :password="!showPassword"
							placeholder="请再次输入密码" placeholder-class="placeholder" />
						<view class="password-toggle" @click="togglePassword">
							<uni-icons :type="typeicon" size="30" :color="coloricon"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 注册时的部门 -->
				<view class="input-group" v-if="!isLogin">
					<text class="label">选择部门</text>
				</view>
				<view class="password-input-wrapper" style="background-color: #fff;border-radius: 10rpx;"
					v-if="!isLogin">
					<!-- <u-button type="primary" shape="circle" color="#1fc9c9" text="点击选择部门"></u-button> -->
					<uni-data-picker placeholder="请选择部门" popup-title="请选择所在部门" :localdata="dataTree" v-model="classes"
						@change="changeFn" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</view>

				<!-- 登录按钮 -->
				<button class="submit-btn" hover-class="submit-btn-acv" :class="{ 'register-btn': !isLogin }"
					@click="handleSubmit">
					{{ isLogin ? '登录' : '注册' }}
				</button>
			</view>

			<!-- 切换登录/注册 -->

			<view class="bumen">
				<view class="switch-text" @click="toggleLoginRegister">
					{{ isLogin ? '立即注册' : '立即登录' }}
				</view>
				<view class="switch-text">
					加入部门
				</view>
				<view class="switch-text">
					申请权限
				</view>
			</view>
			<!-- 版本升级 -->
			<view class="version_upgrade" @click="versionUpgrade">
				版本升级
			</view>
			<!-- 异常弹窗 -->
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeicon: 'eye', //密码显示
				coloricon: '#666', //密码显示
				isLogin: true, // 当前是否为登录状态
				showPassword: false, // 是否显示密码
				form: {
					deptId: '',
					nikeName: '',
					username: '',
					password: '',
					phoneNumber: '',
					confirmPassword: '',
				},
				classes: '',
				dataTree: []
			}
		},
		onLoad(option) {
			this.form.username = this.vuex_usernameLogin,
				this.form.password = this.vuex_passwordLogin
			this.departmentTreeInformation()

		},
		methods: {
			// 选择部门
			changeFn(e) {
				let arr = e.detail.value
				this.classes = arr[arr.length - 1].value
				this.form.deptId = arr[arr.length - 1].value
				console.log('选择完成时触发', arr[arr.length - 1].value);
			},
			onpopupopened() {
				// 树形
				console.log('打开部门树');
			},
			onpopupclosed() {
				console.log('部门树关闭');
			},
			// 切换密码显示/隐藏
			togglePassword() {
				if (!this.showPassword) {
					this.typeicon = 'eye-filled'
					this.coloricon = '#00aa7f'
				} else {
					this.typeicon = 'eye'
					this.coloricon = '#666'
				}

				this.showPassword = !this.showPassword
			},


			// 切换登录/注册
			toggleLoginRegister() {
				
				if(true){
					return
				}
				
				this.isLogin = !this.isLogin
				// 重置密码显示状态
				this.showPassword = false
				// 清空表单
				this.form = {
					username: '',
					password: '',
					phoneNumber: '',
					confirmPassword: ''
				}
				// 切换
				this.typeicon = 'eye'
				this.coloricon = '#666'
			},

			// 提交表单
			handleSubmit() {
				console.log('!this.isLogin ', this.isLogin);
				if (!this.isLogin && this.classes == '') {
					uni.showToast({
						title: '部门未选择',
						icon: 'none'
					})
					return
				}
				if (!this.isLogin && !(uni.$u.test.mobile(this.form.phoneNumber))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					})
					return
				}
				if (!this.isLogin && !this.form.nikeName || !this.form.password) {
					uni.showToast({
						title: '请输入昵称和密码',
						icon: 'none'
					})
					return
				}

				if (!this.isLogin && this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return
				}

				// 这里应该是调用API的代码
				if (this.isLogin) {
					this.login()
				} else {
					this.register()
				}
			},

			// 登录
			login() {
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					mask: true,
					duration: 500
				});
				uni.$u.http.post('/login', {
					"username": this.form.username,
					"password": this.form.password
				}).then(res => {
					console.log('登录', res);
					if (res.code != 200) {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							icon: false,
							message: '账号密码错误'
						})
					}
					if (res.code == 200) {
						uni.hideLoading()
						console.log('获取---', res)
						uni.$u.vuex('vuex_token', res.token)
						uni.$u.vuex('vuex_login', 1)
						uni.$u.vuex('vuex_usernameLogin', this.form.username)
						uni.$u.vuex('vuex_passwordLogin', this.form.password)
						uni.redirectTo({
							url: '/pages/index/home'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '未连接网络',
						icon: 'loading',
						mask: true,
						duration: 500
					});
					console.log('错误', err);
				})
			},

			// 模拟注册
			register() {
				uni.showLoading({
					title: '注册中...'
				})
				console.log(this.form.deptId * 1, this.form.nikeName, this.form.phoneNumber, this.form.password);
				// 模拟API请求
				uni.$u.http.post('/api/device/userRegistrationAudit/userRegistration', {
					"deptId": this.form.deptId * 1,
					"nikeName": this.form.nikeName,
					"phoneNumber": this.form.phoneNumber,
					"password": this.form.password
				}).then(res => {
					uni.hideLoading()
					console.log('注册', res);
					this.toastFnAA(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							// 注册成功后自动切换到登录状态
							this.isLogin = true
							this.form.password = ''
							this.form.confirmPassword = ''
							this.showPassword = false
							this.classes = ''
						}, 500)

					}
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '未连接网络',
						icon: 'loading',
						mask: true,
						duration: 500
					});
					console.log('错误', err);
				})

			},
			// 部门树形信息
			departmentTreeInformation() {
				uni.$u.http.get('/api/device/device/deptTreeSelect').then(res => {
					if (res.code == 200) {
						console.log('部门树形--', res.data);
						this.dataTree = this.transformTreeData(res.data)
					}
				}).catch(err => {
					this.toastFn()
					console.log('错误', err);
				})
			},
			// 弹窗
			toastFnAA(data) {
				this.$refs.uToast.show({
					type: "error",
					icon: false,
					title: "失败主题",
					message: data,
				});
			},
			toastFn() {
				this.$refs.uToast.show({
					type: "error",
					icon: false,
					title: "失败主题",
					message: "获取网络失败",
				});
			},
			// 递归遍历转换
			transformTreeData(tree) {
				return tree.map(node => {
					const newNode = {
						value: node.id, // 将id改为value
						text: node.label // 将label改为text
					};

					// 复制其他属性
					for (const key in node) {
						if (key !== 'id' && key !== 'label' && key !== 'children') {
							newNode[key] = node[key];
						}
					}

					// 递归处理子节点
					if (node.children && node.children.length) {
						newNode.children = this.transformTreeData(node.children);
					}

					return newNode;
				});
			},
			// 版本升级
			versionUpgrade() {
				uni.navigateTo({
					url: '/pages/index/renewal'
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	// 版本升级
	.version_upgrade {
		position: fixed;
		bottom: 120rpx;
		font-size: 28rpx;
		color: #4cd964;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	/* 公共样式 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background-color: #f1f4f6;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 头部标题 */
	.header {
		margin-top: 20rpx;
		margin-bottom: 80rpx;
		text-align: center;

		.bg-img {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	/* 表单容器 */
	.form-container {
		width: 100%;
		max-width: 600rpx;
	}

	/* 输入框组 */
	.input-group {
		margin-bottom: 30rpx;
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 16rpx;
	}

	/* 密码输入框容器 */
	.password-input-wrapper {
		position: relative;
	}

	.input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding-right: 80rpx;
		/* 为眼睛图标留出空间 */
	}

	.placeholder {
		color: #ccc;
		font-size: 28rpx;
	}

	/* 密码显示/隐藏按钮 */
	.password-toggle {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		margin-top: 60rpx;
		border: none;
	}

	.submit-btn-acv {
		background-color: rgba(0, 122, 255, 0.5);
	}

	.register-btn {
		background-color: #4cd964;
	}


	.bumen {
		width: 650rpx;
		color: #007aff;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		font-size: 30rpx;

		/* 切换登录/注册文本 */
		.switch-text {
			&:active {
				color: #0081a8;
			}
		}

	}
</style>
<style>
	page {
		background-color: #f1f4f6;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>